import * as utils from '../utils'
import { mat4, vec3 } from 'gl-matrix'

function createCourse12 (gl: WebGLRenderingContext, dom: HTMLCanvasElement) {
  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)
  const vectexShaderSrc = `
    attribute vec4 a_Position;
    uniform mat4 u_Matrix;
      void main() {
        gl_Position = u_Matrix * a_Position;
      }
    `

  const fragmentShaderSrc = `
    precision mediump float;
    uniform vec4 u_FragColor;
      void main() {
          gl_FragColor = u_FragColor;
      }
    `
  const program = utils.initShaders(gl, vectexShaderSrc, fragmentShaderSrc)

  // 旋转速度每秒45度
  const angleSpeed = 45 / 180 * Math.PI
  // 当前的角度
  let angle = 0
  let oldTime = Date.now()

  // x的位置信息
  let x = 0

  const mat = mat4.create()
  const rotationMat = mat4.create()
  const translateMat = mat4.create()
  const axis = vec3.create()
  const translateX = vec3.create()
  vec3.set(axis, 0, 0, 1)
  mat4.fromRotation(rotationMat, angle, axis)
  const uMatrix = gl.getUniformLocation(program, 'u_Matrix')

  function initVertexBuffers () {
    // 将attribute变量跟javascript变量绑定在一起
    const aPosition = gl.getAttribLocation(program, 'a_Position')

    mat4.multiply(mat, rotationMat, translateMat)
    gl.uniformMatrix4fv(uMatrix, false, mat)

    const uFragColor = gl.getUniformLocation(program, 'u_FragColor')
    gl.uniform4f(uFragColor, 1.0, 0.0, 0.0, 1.0)

    const p1 = getTrianglePoints(0, 0)
    const p2 = getTrianglePoints(100, 0)
    const p3 = getTrianglePoints(100 * Math.cos(60 / 180 * Math.PI), 100 * Math.sin(60 / 180 * Math.PI))
    const vertices = new Float32Array([
      p1.x, p1.y, p2.x, p2.y, p3.x, p3.y
    ])
    // 创建缓冲区对象
    const vertexBuffer = gl.createBuffer()
    // 绑定缓冲区
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
    // 向缓冲区写入对象
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
    // 将缓冲区对象分配个attribute变量
    gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0)
    // 开启attribute变量
    gl.enableVertexAttribArray(aPosition)

    return 3
  }

  const count = initVertexBuffers()

  gl.drawArrays(gl.TRIANGLES, 0, count)

  tick()
  function tick () {
    animation()
    draw()
    requestAnimationFrame(tick)
  }

  function animation () {
    const newTime = Date.now()
    const delta = newTime - oldTime
    oldTime = newTime
    angle += (delta / 1000) * angleSpeed
    x = Math.sin(angle)
  }

  function draw () {
    mat4.fromRotation(rotationMat, angle, axis)
    vec3.set(translateX, x, 0, 0)
    mat4.fromTranslation(translateMat, translateX)
    mat4.multiply(mat, translateMat, rotationMat)

    gl.uniformMatrix4fv(uMatrix, false, mat)

    gl.clear(gl.COLOR_BUFFER_BIT)
    gl.drawArrays(gl.TRIANGLES, 0, count)
  }

  function getTrianglePoints (x: number, y: number): {x: number, y: number} {
    const { offsetWidth, offsetHeight } = dom
    const rate = offsetWidth / offsetHeight
    x = x / offsetHeight / rate
    y = y / offsetHeight
    return { x, y }
  }
}

export {
  createCourse12
}
